<template>
  <div id="app">
    <NavigationBar>
      <img slot="left" src="./assets/navigationbar/navigation_bar_back.png"/>
      <div slot="middle">{{this.$route.meta.title}}</div>
      <img slot="right" src="./assets/navigationbar/swiper_icon.png"/>
    </NavigationBar>
    <router-view/>
    <Tabbar>
      <TabarItem path="/">
        <img slot="icon" src="./assets/tabbar/home_nomal.png"/>
        <img slot="icon_active" src="./assets/tabbar/home_active.png"/>
        <div slot="title">首页</div>
      </TabarItem>
      <TabarItem path="/category">
        <img slot="icon" src="./assets/tabbar/category_nomal.png"/>
        <img slot="icon_active" src="./assets/tabbar/category_active.png"/>
        <div slot="title">分类</div>
      </TabarItem>
      <TabarItem path="/cart">
        <img slot="icon" src="./assets/tabbar/cart_nomal.png"/>
        <img slot="icon_active" src="./assets/tabbar/cart_active.png"/>
        <div slot="title">购物车</div>
      </TabarItem>
      <TabarItem path="/mine">
        <img slot="icon" src="./assets/tabbar/mine_nomal.png"/>
        <img slot="icon_active" src="./assets/tabbar/mine-active.png"/>
        <div slot="title">我的</div>
      </TabarItem>
    </Tabbar>
  </div>
</template>

<script>
import Tabbar from "./components/tabbar/Tabbar"
import TabarItem from "./components/tabbar/TabbarItem"
import NavigationBar from "./components/navigationBar/Navigationbar"

export default {
  components:{
    Tabbar,
    TabarItem,
    NavigationBar
  }
}
</script>


<style>
*
{
  margin: 0;
  padding: 0;
}
</style>
